﻿@{
    Layout = "_CustomerLayout";
    var BookType = Model;
    ViewData["Name"] = BookType[0].CustomerName;
    ViewData["Title"] = "外国长篇小说";
}
<head>
    <title>图书信息</title>
    <link href="~/css/customerstyle.css" rel='stylesheet' type='text/css' />
    <meta name="viewport" content="width=device-width, initial-scale=0">
    @section Scripts{
        <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
        <!----webfonts---->
        <!----//webfonts---->
        <!-- Global CSS for the page and tiles -->
        <link rel="stylesheet" href="~/css/customermain.css">
        <!-- //Global CSS for the page and tiles -->
        <!---start-click-drop-down-menu----->
        <script src="~/js/jquery.min.js"></script>
        <!----start-dropdown--->
        <script type="text/javascript">
            $(document).ready(function () {
                //Hide (Collapse) the toggle containers on load
                $(".toggle_container").hide();
                //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
                $(".trigger").click(function () {
                    $(this).toggleClass("active").next().slideToggle("slow");
                    return false; //Prevent the browser jump to the link anchor
                });

            });

            /**/</script>
        <script src="~/js/jquery.imagesloaded.js"></script>
        <script src="~/js/jquery.wookmark.js"></script>
        <script type="text/javascript">
            (function ($) {
                var $tiles = $('#tiles'),
                    $handler = $('li', $tiles),
                    $main = $('#main'),
                    $window = $(window),
                    $document = $(document),
                    options = {
                        autoResize: true, // This will auto-update the layout when the browser window is resized.
                        container: $main, // Optional, used for some extra CSS styling
                        offset: 30, // Optional, the distance between grid items
                        itemWidth: 300 // Optional, the width of a grid item
                    };
                /**
                 * Reinitializes the wookmark handler after all images have loaded
                 */
                function applyLayout() {
                    $tiles.imagesLoaded(function () {
                        // Destroy the old handler
                        if ($handler.wookmarkInstance) {
                            $handler.wookmarkInstance.clear();
                        }
                        // Create a new layout handler.
                        $handler = $('li', $tiles);
                        $handler.wookmark(options);
                    });
                }
                /**
                 * When scrolled all the way to the bottom, add more tiles
                 */
                function onScroll() {
                    // Check if we're within 100 pixels of the bottom edge of the broser window.
                    var winHeight = window.innerHeight ? window.innerHeight : $window.height(), // iphone fix
                        closeToBottom = ($window.scrollTop() + winHeight > $document.height() - 100);

                    if (closeToBottom) {
                        // Get the first then items from the grid, clone them, and add them to the bottom of the grid
                        var $items = $('li', $tiles),
                            $firstTen = $items.slice(0, 10);
                        $tiles.append($firstTen.clone());
                        applyLayout();
                    }
                };

                // Call the layout function for the first time
                applyLayout();

                //// Capture scroll event.
                //$window.bind('scroll.wookmark', onScroll);
            })(jQuery);

            /**/</script>
    }
</head>
<div class="navbar-collapse collapse ">
    <ul class="nav navbar-nav navbar-left">
        <li>
            <a href="#" class="dropdown-toggle" id="ddlmenuItem" data-toggle="dropdown">图书类别<i class="fa fa-angle-down"></i></a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="ddlmenuItem">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="/Customer/ChinaStory?id=中国当代小说">中国当代小说</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="/Customer/ForeignStory?id=外国当代小说">外国当代小说</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="/Customer/ForeignLongStory?id=外国长篇小说">外国长篇小说</a></li>
            </ul>
    </ul>
</div>
<div id="main" role="main">
    <form method="post">
        <ul id="tiles">
            @for (int i = 0; i < BookType.Count; i++)
            {
                var isbn = BookType[i].isbn;
                var SRCisbn = isbn + ".jpg";
                <li>
                    <a href="/Customer/BookDetail?id=@isbn"><img src="~/bookimg/@SRCisbn" width="25" height="350"></a>
                    <div class="post-basic-info">
                        <h3 class="text-center" style="font-size:25px;color:black;">@BookType[i].BookName</h3>
                        <label>作者:@BookType[i].AuthorName</label>
                        <br />
                        <label>库存:@BookType[i].Inventory</label>
                        <br />
                        <label>销量:@BookType[i].SaleCount</label>
                        <br />
                        <label>类型:@BookType[i].Type</label>
                        <br />
                        <span style="font-size:25px; color:red; ">价格:@BookType[i].Price</span>
                        <br />
                    </div>
                </li>
            }
        </ul>
    </form>
</div>